<template>
  <view>
     <view class="search-box">
         <view class="search-bar">
            <uni-search-bar :radius="100" :focus="true" @input="input"  bgColor="#ffffff" placeholder="请输入搜索内容" autofocus  clearButton="auto" cancelButton="none"></uni-search-bar>
         </view>
     </view>
     
    <!-- // 搜索框建议列表 -->
     <view class="suggest-list" v-if="searchList.length !== 0">
        <view class="suggest-item" v-for="(item,id) in searchList" :key="id" @click="gotoGoodsdetail(item.id)">
          <text class="txt">{{ item.goods_name }}</text>
          <uni-icons type="forward" size="17"></uni-icons>
        </view>
     </view>
     
     <!-- 搜索历史框 -->
     <view class="history-box" v-else>
         <view class="history-content">
            <text>搜索历史</text>
            <uni-icons type="trash" size="17" @click="cleanList"></uni-icons>
         </view>
        <!-- 历史列表 -->
         <view class="history-list">
              <uni-tag @click="gotoGoodslist(item)" :text="item" v-for="(item,id) in histories" :key="id"></uni-tag>
         </view>
     </view>
  </view>
</template>

<script>
  import { toSearch } from '@/api/search.js'
  export default {
    data() {
      return {
        //防抖处理
        timer:null,
        query:'', //输入框的值
        searchList: [], //输入框数组
        historyList: [], //历史数组
      };
    },
      computed: {
        histories() {
          return [...this.historyList].reverse()
        }
      },
      
       onLoad() {
         // 此处是为了让搜索的历史拿出来到历史记录中
            this.historyList = JSON.parse(uni.getStorageSync('query')  || '[]')
          },
    methods: {
      // 输入函数
      input(val) {
             // 清除time延时器
             clearTimeout(this.timer)
             // 启动定时器
             this.timer = setTimeout(() => {
               this.query = val

               // console.log(this.query);
                this.getSearch()
                setTimeout(() => {
                  this.searchRecord()
                },1000)
             },500)
           },
      //渲染搜索列表
  async  getSearch() {
       if (this.query === '') {
          this.searchList = []
          return
       }
        const res = await toSearch({ query: this.query }) 
        // console.log(res);
        this.searchList = res.message
      },
      
      // 搜索记录
      searchRecord() {
       // this.historyList.unshift(this.query)
       //对数组进行去重
       const set = new Set(this.historyList)
       set.delete(this.query)
       set.add(this.query)
       this.historyList = Array.from(set)
       //将历史记录存到本地
       uni.setStorageSync('query', JSON.stringify(this.historyList))
      },
      // 删除历史记录
      cleanList() {
        this.historyList = ''
        // 把本地储存的变为空数组
        uni.setStorageSync('query', '[]')
      },
      // 点击历史记录跳转list页面
      gotoGoodslist(item) {
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list?query= " + item
        })
      },
      // 点击跳转到商品详情页
      gotoGoodsdetail(id) {
        uni.navigateTo({
          url:"/subpkg/goods_detail/goods_detail?goods_id" + id
        })
      }
    }
  }
</script>

<style lang="scss">
.search-box {
  background-color: #c00000;
  position: sticky;
  top:0;
  z-index: 999;
}
.suggest-list {
  padding: 0 5px;
  .suggest-item {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #efefef;
    .txt {
      // 文字溢出隐藏,不允许换行
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
    }
  }
}

.history-box {
  padding: 0 5px;
  .history-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
    padding: 13px 0;
  }
}
.history-list {
  margin-top: 5px;
  .uni-tag {
    margin-right: 5px;
    color:#010101;
    background-color: #efefef;
    border: 1px solid #efefef;
    // display: flex;
    // flex-wrap: wrap;
  }
}
</style>
